<!--
 * @Author: new-wang
 * @Date: 2025-03-04 13:42:37
 * @LastEditors: new-wang
 * @LastEditTime: 2025-05-29 17:57:30
 * @FilePath: \v3bbs\src\App.vue
 * @Description:
-->
<template>
  <a-config-provider
    :locale="lang[language as keyof typeof lang]"
    :theme="{ token: { colorPrimary: themeColor } }"
  >
    <router-view />
  </a-config-provider>
</template>

<script setup lang="ts">
import zh from 'ant-design-vue/es/locale/zh_CN'
import en from 'ant-design-vue/es/locale/en_US'
import { useConfigStore } from '@/stores/config'
import { storeToRefs } from 'pinia'
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'

// "string" 类型的表达式不能用于索引 问题
// 第一种解决
// interface LangType {
//   [key: string]: any //// 定义一个字符串索引签名
// }
// const lang: LangType = { zh, en }
// 第二种解决
// const lang = { zh, en } as { [key: string]: any }
// 第三种解决
// :locale="lang[language as keyof typeof lang]"
const lang = { zh, en }
const { language, width, height, collapsed, themeColor } = storeToRefs(useConfigStore())
const route = useRoute()
function initDom() {
  // 初始化页面。获取屏幕尺寸以及监听屏幕尺寸
  window.onload = setWidth
  window.onresize = setWidth

  function setWidth() {
    width.value = window.innerWidth
    height.value = window.innerHeight
    // // 900/1050
    collapsed.value = window.innerWidth < 1000
    // that.$store.state.collapsedMax = window.innerWidth < 1300;
  }
}
onMounted(() => {
  // 设置语言、主题和主题色
  const { setLanguage, language, setTheme, theme, setThemeColor, themeColor } = useConfigStore()
  setLanguage(language, route.meta?.title)
  setTheme(theme)
  setThemeColor(localStorage.getItem('theme_color') || themeColor)

  // 初始化页面。获取屏幕尺寸以及监听屏幕尺寸
  initDom()
  // 初始化获取用户权限状态
})
</script>

<style scoped></style>
